<template>
    <div v-show="show" @click="handleClick" class="top-container">
      Top
    </div>
</template>

<script>
export default {
  name: 'index',
  created () {
    this.$bus.$on('mainScroll', this.handleScroll)
  },
  data () {
    return {
      show: false
    }
  },
  methods: {
    handleScroll (dom) {
      if (!dom) {
        this.show = false
        return
      }
      this.show = dom.scrollTop >= 500
    },
    handleClick () {
      this.$bus.$emit('setMainScroll', 0)
    }
  },
  destroyed () {
    this.$bus.$off('mainScroll')
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/var.less";
  .top-container{
    background: @primary;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: fixed;
    right: 50px;
    bottom: 50px;
    z-index: 99;
    cursor: pointer;
    text-align: center;
    color: #fff ;
    line-height: 50px;
  }
</style>
